<template>
  <el-dialog title="点位详情" :visible="nodeDetail" @close="handleClose">
    <el-table
      style="width: 100%; margin-top: 20px; margin-left: 20px"
      :header-cell-style="{
        background: '#f5f7fa',
        fontWeight: 500,
        color: 'black',
      }"
      :data="gridData"
    >
      <el-table-column type="index" label="序号" width="80" />
      <el-table-column prop="innerCode" label="机器编号" width="158" />
      <el-table-column prop="vmStatus" label="设备状态" width="158">
        <template v-slot="{ row }">
          {{
            row.vmStatus === 0 ? "未投放" : row.vmStatus === 1 ? "运营" : "撤机"
          }}
        </template>
      </el-table-column>
      <el-table-column
        label="最后一次供货时间"
        width="158"
        prop="lastSupplyTime"
      >
        <template v-slot="{row}">
          {{ row.lastSupplyTime | time }}
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
import { getNodeDetail } from '@/api/point'
import getTime from '@/utils/getTime'
export default {
  components: {},
  filters: {
    time (val) {
      return getTime.getFormatTime(val)
    }
  },
  props: {
    nodeDetail: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      gridData: []
    }
  },
  computed: {},
  watch: {},
  methods: {
    handleClose () {
      this.$emit('update:nodeDetail', false)
    },
    async getNodeDetail (id) {
      try {
        const res = await getNodeDetail(id)
        // console.log(res)
        this.gridData = res.data
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.el-table {
  ::v-deep td {
    height: 40px;
    padding: 0 !important;
    border: none;
  }
}

::v-deep .el-dialog {
  width: 630px;
}
</style>

<style lang="scss">
.el-table {
  border: 0;
  th,
  tr,
  td {
    border: 0;
    background-color: #fff;
  }
  &::before {
    height: 0px;
  }
  &::after {
    width: 0;
  }
  .el-table__fixed:before {
    height: 0;
  }
}
</style>
